<template>
  <div>
    <el-row style="padding-top: 20px;padding-left: 20px;" class="header">
      <el-col :span="12">
        <el-form :model="form" label-width='50px' style="display: flex;">

          <el-form-item label="姓名" style="width: 40%;">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="电话" style="width: 40%;">
            <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
          </el-form-item>

        </el-form>
      </el-col>

      <el-col :span="6">
        <el-button type="primary" size="small" @click="renderAddressList">搜索</el-button>
        <el-button size="small" style="margin-left: 20px;" @click="form = {};renderAddressList()">重置</el-button>
      </el-col>
    </el-row>

    <el-table :data="tableData" border class="table" :height="getHeight()" style="margin: 20px; width: 90% ">
      <el-table-column type="index" label="序号" width="100" align="center" fixed>
      </el-table-column>

      <el-table-column prop="name" label="姓名" width="200" align="center">
      </el-table-column>
      <el-table-column prop="phone" label="电话" width="200" align="center">
      </el-table-column>
      <el-table-column prop="consignee_address" label="收货地址" align="center">
        <template slot-scope="{row}">
          <div>
            {{ row.province + row.city + row.town + row.street + row.detail }}
          </div>
        </template>
      </el-table-column>

    </el-table>

    <!-- 分页 -->
    <el-row class="footer" style="margin: 20px;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[5, 10, 15, 20]" :page-size="limit" layout="total, sizes, prev, pager, next,jumper" :total="count">
      </el-pagination>
    </el-row>
  </div>
</template>
  
<script>
import { getAddressList } from '@/api/order'
export default {
  name: 'orderAddress',
  data() {
    return {
      form: {
        name:'',
        sex:""
      },
      tableData: [],
      page: 1,
      limit: 20,
      count: 0,
    }
  },
  created() {
    this.renderAddressList()
  },

  methods: {
    renderAddressList() {
      getAddressList({ limit: this.limit, page: this.page, ...this.form }).then(res => {
        if (res.code == 1) {
          this.tableData = res.data.list
          this.count = res.data.count
          //console.log(this.tableData)
        }
      })
    },


    handleSizeChange(val) {
      this.limit = val
      this.renderAddressList()
    },
    //改变当前页
    handleCurrentChange(val) {
      this.page = val
      this.renderAddressList()
    },
    //获取表格高度
    getHeight() {
      return window.innerHeight - 255
    },
  }
}
</script>  
  
<style scoped>
.header {
  border-bottom: 1px solid #e1e1e1;
}
</style>
  